<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'dark', // 样式URL
                center: [114.30, 30.50],
                pitch: 30,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        scene.on("loaded", () => {
            /* 5、风场 */
            const windLayer = new L7.WindLayer({
                name: "风场"
            })
                .source(
                    'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
                    {
                        parser: {
                            type: 'image',
                            extent: [-180, -85, 180, 85]
                        }
                    }
                )
                .animate(true)
                .style({
                    numParticles: 35535,
                    fadeOpacity: 0.9,
                    sizeScale: 1.3,
                    rampColors: {
                        0.0: '#3288bd',
                        0.1: '#66c2a5',
                        0.2: '#abdda4',
                        0.3: '#e6f598',
                        0.4: '#fee08b',
                        0.5: '#fdae61',
                        0.6: '#f46d43',
                        1.0: '#d53e4f'
                    }
                });
            scene.addLayer(windLayer);
        })
    </script>
</body>

</html>